<template>
	<view class="container">
		<view class="main" >
			<view style="width: 500rpx;margin: 100px auto;">
				<u--form 
								labelPosition="left"
								:model="model1"
								ref="form1"
								:rules="rules"
						>
						<u-form-item
								label="账号"
								borderBottom
								ref="item1"
								prop="userInfo.userId"
						>
							<u--input
									v-model="model1.userInfo.userId"
									border="none"
							></u--input>
							</u-form-item>
							<u-form-item
									label="昵称"
									borderBottom
									ref="userInfo.item1"
							>
								<u--input
										v-model="model1.userInfo.username"
										border="none"
								></u--input>
							</u-form-item>
							<u-form-item
									label="邮箱"
									borderBottom
									ref="userInfo.email"
							>
								<u--input
										v-model="model1.userInfo.email"
										border="none"
								></u--input>
							</u-form-item>
							<u-form-item
									label="密码"
									borderBottom
									ref="item1"
									prop="userInfo.password"
							>
								<u--input
										v-model="model1.userInfo.password"
										border="none"
										type="password"
								></u--input>
							</u-form-item>
							<u-form-item
									label="重新输入"
									borderBottom
									ref="item1"
									prop="userInfo.rePassword"
							>
								<u--input
										v-model="model1.userInfo.rePassword"
										border="none"
										type="password"
								></u--input>
							</u-form-item>
						</u--form>
			</view>
					<u-button type="primary" text="注册" style="margin: 180rpx;width: 350rpx;" @click="handleRegister"></u-button>
		</view>
		
	</view>
</template>

<script style="scoped">
	export default {
		data() {
			var validatePass = (rule, value, callback) => {
			  if (value === '') {
			      callback(new Error('请输入密码'));
			  } else {
			   if (this.model1.userInfo.password !== '') {
			     this.$refs.form1.validateField('confirmPwd');
			   }
			   callback();
			  }
			 };
			 var validatePass2 = (rule, value, callback) => {
			   if (value === '') {
			     callback(new Error('请再次输入密码'));
			   } else if (value !== this.model1.userInfo.password) {
			     callback(new Error('两次输入密码不一致!'));
			   } else {
			     callback();
			   }
			};
			return {
				model1:{
					userInfo: {
						userId: '',
						username:'',
						email:'',
						password: '',
						rePassword:'',
					},
				},
				
				rules: {
					'userInfo.userId': {
						type:'number',
						required: true,
						message: '请填写8位账号',
						len:8,
						trigger: ['change']
					},
					'userInfo.password': {
						type:'number',
						required: true,
						message: '请输入密码',
						trigger: ['blur', 'change']
					},
					'userInfo.email': {
						required: true,
						message: '请输入邮箱',
						trigger: ['blur', 'change']
					},
					'userInfo.rePassword': [{
						type:'number',
						required: true,
						message: '请输入密码',
						trigger: ['blur', 'change']
					},{
						validator: validatePass2, trigger: 'blur', required: true
					}]
				},
				radio: '',
				switchVal: false
			}
		},

		methods: {
			
			sexSelect(e){
				this.model1.userInfo.name = e.name
			},
			handleRegister(){
				uni.request({
					url:'/api/user/register',
					method: 'post',
					header:{ 
						'content-type':'application/x-www-form-urlencoded'
					},
					data:this.model1.userInfo,
					success: (res) => {
						if(res.data.code===200){
							if(res.data.data===1){
								uni.showToast({
												icon: 'success',
												position: 'bottom',
												title: '注册成功,请返回登录'
											})
							}
						}
					}
				})
			},
		}
	}
</script>

<style>
.container{
	display: flex;
	margin: 0;
	height: 1250rpx;
	width: auto;
	background: url(../../static/common/34a5b41100e6cd17101823a17d9e631e.jpeg) no-repeat center center;
}


</style>
